<template>
    <div class="home-product">
      <ul>
        <li v-for="item in brandList" :key="item.id">
          <img :src="item.pic_url" alt="">
          <h4>{{ item.name }}</h4>
        </li>
      </ul>
    </div>
  </template>
  
  <script setup>
  const brandList = [
    {
      id: 1,
      name: '直播',
      pic_url: 'images/product1.jpg'
    },
    {
      id: 2,
      name: '推荐',
      pic_url: 'images/product2.jpg'
    },
    {
      id: 3,
      name: '补贴',
      pic_url: 'images/product3.jpg'
    },
    {
      id: 4,
      name: '分享',
      pic_url: 'images/product4.jpg'
    }
  ]
  </script>
  
  <style lang="less" scoped>
  .home-product {
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 1rem 0;
      background-color: #f9f9f9;
      li {
        width: 49.5%;
        margin-bottom: 1rem;
        position: relative;
        img {
          width: 100%;
        }
        h4 {
          font-size: 14px;
          position: absolute;
          left: 2px;
          top: -13px;
          background-color: red;
          color: #fff;
          border-radius: 10%;
          padding: 1px 3px;
        }
      }
    }
  }
  </style>
  